<template>
  <div class="flex justify-center items-center h-screen bg-cover login">
    <div class="rounded bg-white w-[400px] p-6 loginForm">
      <div class="text-center mb-4">
        <span class="text-2xl ">{{ admin_setting.ADMIN_TITLE }} </span>
      </div>
      <a-form :model="loginData.formData" @finish="login" ref="loginFormRef">
        <a-form-item
            :rules="[{ required: true, message: '请输入用户名'}]"
            name="account">
          <a-input v-model:value="loginData.formData.account" placeholder="请输入用户名">
            <template #prefix>
              <UserOutlined class="site-form-item-icon"/>
            </template>
          </a-input>
        </a-form-item>
        <a-form-item
            :rules="[{ required: true, message: '请输入密码'}]"
            name="password">
          <a-input-password v-model:value="loginData.formData.password" placeholder="请输入密码">
            <template #prefix>
              <LockOutlined class="site-form-item-icon"/>
            </template>
          </a-input-password>
        </a-form-item>
        <a-form-item
            :rules="[{ required: true, message: '请输入验证码'}]"
            name="password">
       <div class="flex gap-4">
         <a-input v-model:value="loginData.formData.code" placeholder="请输入验证码">
         </a-input>
         <sidentify :identify-code="randomCode" @click="flushRandomCode"></sidentify>
       </div>
        </a-form-item>

        <a-form-item>
          <a-button :loading="loading" class="w-full" html-type="summit" type="primary">登陆</a-button>
        </a-form-item>
      </a-form>
<!--      <div class="flex justify-end">-->
<!--                              <span @click="() => router.push('/register')"-->
<!--                                    class="text-blue-500 text-sm hover:text-blue-600 cursor-pointer">-->
<!--                                没有账号？立即注册</span>-->
<!--      </div>-->
    </div>


  </div>
</template>

<script setup>

import {reactive, ref} from 'vue';
import {useRouter} from 'vue-router';
import {LockOutlined, UserOutlined} from '@ant-design/icons-vue';
import {doLogin, getLoginMenu, getLoginUser} from '@/api/userApi.js';
import {admin_setting} from '@/config/adminConfig.js';
import Sidentify from '@/components/Sidentify.vue';
import {message} from 'ant-design-vue';

const loginFormRef = ref('')
const loading = ref(false)

let randomCode = ref('')
const router = useRouter()
const loginData = reactive({
  formData: {
    account: '',
    password: '',
    code:''
  },
})

function flushRandomCode() {
  randomCode.value = generateRandom4Digits()
}
flushRandomCode()

function generateRandom4Digits() {
  // 生成一个0到9999之间的随机数
  let randomNumber = Math.floor(Math.random() * 10000);

  // 如果随机数不够4位，则在前面补0
  return String(randomNumber.toString().padStart(4, '0'));
}



async function login() {


  if (loginData.formData.code !== randomCode.value) {
    message.error('验证码错误')
    flushRandomCode()

    return
  }
  loading.value = true
  try {
    const data = await doLogin(loginData.formData)
    await afterLogin(data)
  } finally {
    flushRandomCode()
    loading.value = false
  }
}




async function afterLogin(token) {
  // 保存token
  localStorage.setItem('TOKEN', token)
  // 获取登录人信息
  const loginUser = await getLoginUser()
  // 保存登录人信息到 localstorage 和 pinia
  localStorage.setItem('USER_INFO', JSON.stringify(loginUser))
  // 获取用户菜单并保存到localstorage

  const userMenu = await getLoginMenu()
  localStorage.setItem('USER_MENU', JSON.stringify(userMenu))

  // 将用户推到首页
  await router.replace('/admin')

}

</script>

<style scoped>
.login {
  background-image: url('../assets/login-bg.jpg');
}

.loginForm {
  background-color: rgba(255, 255, 255, 0.6);
  /* 白色，50% 透明度 */
}
</style>
